<!--新建角色-->
<template>
    <div>
        <h4>角色管理-->新建角色</h4>
        <div class="box">
            <p class="zh">输入角色名称</p>
            <el-input v-model="input" placeholder="角色名称" class="search-style"></el-input>
            <p class="ys">分配角色后台管理权限</p>
            <div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
            </div>
            <div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
            </div>
            <div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
                <div class="power ys zhuan">
                    <i class="el-icon-circle-plus-outline"></i>
                    <p class="zhuan qx">基础资料</p>
                </div>
            </div>
            <p class="ys">分配角色小程序移动端权限</p>
            <div class="power ys">
                <i class="el-icon-circle-plus-outline"></i>
                <p class="zhuan qx">考勤数据</p>
            </div>
            <div class="power ys">
                <i class="el-icon-circle-plus-outline"></i>
                <p class="zhuan qx">病假审批</p>
            </div>
            <div class="power ys">
                <i class="el-icon-circle-plus-outline"></i>
                <p class="zhuan qx">清假审批</p>
            </div>
            <div class="opera">
                <el-row>
                    <el-button type="success" class="jl" size="medium">保 存</el-button>
                    <el-button type="danger" size="medium">取 消</el-button>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    export default {
        name: "build",
        computed: {
            ...mapGetters(['permissions']),
        },
    }
</script>

<style scoped>
    h4{
        margin-left:30px ;
    }
    .box{
         width: 90%;
         margin: 0 auto;
         background: #fff;
         border: 1px solid #999faf;
     }
    .search-style{
        width: 15%;
        margin-right: 20px;
        border-radius: 25px;
    }
    .zh{
        display: inline-block;
        margin: 34px 12px 20px 20px;
    }
    .ys{
        margin-left: 20px;
    }
    .power{
        width: 187px;
        height: 40px;
        background: #1ABC9C;
        text-align: center;
        color: #fff;
        margin-bottom: 5px;
        margin-right: 230px;
    }
    .zhuan{
        display: inline-block;
    }
    .qx{
        margin: 10px 0 0 10px;
    }
    .opera{
        width: 100%;
        text-align: center;
        margin-bottom: 42px;
        margin-top: 20px;
    }
    .jl{
        margin-right: 10px;
    }
</style>